<template>
<div>
    <div class="base-template__content">
        <div  class="moon__title">行政区划 WFS 服务资源</div>
        <div  class="moon__img">
            <!-- <div  class="grace-fo-img">
                <img  src="http://sasclouds.com/chinese/img/GRACE-F0.94a687b6.jpg" alt="">
                <div   class="img-source">图片来源：NASA</div>
            </div> -->
        </div>
        <div  class="moon__descriptionList">
            行政区划 WFS 服务资源是以2018年自治区行政区划为矢量数据,通过PostGis数据库存储数据、Geoserver服务器发布数据，形成标准的OGC WFS服务资源，该服务资源包含自治区（1个,level=1）、盟市（12个,level=2）、旗县（103个,level=3）、乡镇苏木（1022个,level=4）,通过指定的参数可以访问该资源。
        </div>
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">服务资源描述</div>
            <div  class="new-content-line" style="width: 94px;"></div>
        </div>
        <table  class="table-custom">
            <tbody >
                <tr >
                    <td >资源路径</td>
                    <td style="user-select: text;">{{url}}</td>
                </tr>
                <tr >
                    <td >请求方式</td>
                    <td >GET/POST</td>
                </tr>
                <tr >
                    <td >权限</td>
                    <td >公开访问</td>
                </tr>
                <tr >
                    <td >跨域情况</td>
                    <td >跨域可用</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">服务请求参数</div>
            <div  class="new-content-line"  style="width: 94px;"></div>
        </div>
        <table  class="table-custom">
            <thead >
                <tr >
                    <th >参数</th>
                    <th >默认值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr >
                    <td >service</td>
                    <td >WFS</td>
                    <td >必须项，服务类型描述</td>
                </tr>
                <tr >
                    <td >version</td>
                    <td >1.1.0</td>
                    <td >必须项，服务版本描述</td>
                </tr>
                <tr >
                    <td >request</td>
                    <td >GetFeature</td>
                    <td >必须项，服务操作描述</td>
                </tr>
                <tr >
                    <td >TYPENAME</td>
                    <td >xzqh:xzqh</td>
                    <td >必须项，服务器数据库资源描述</td>
                </tr>
               
                <tr >
                    <td >SRSNAME</td>
                    <td >EPSG:4490</td>
                    <td >必须项，服务资源返回投影，原数据为4490投影，一般应设置EPSG:3857（网络墨卡托投影）</td>
                </tr>
                 <tr >
                    <td >PROPERTYNAME</td>
                    <td ></td>
                    <td >非必须项，该资源的属性有name,code,precode,level,geom,可以当个使用也可以多个使用，如"name,code"表明只返回name和code字段</td>
                </tr>
                 <tr >
                    <td >outputFormat</td>
                    <td ></td>
                    <td >非必须项，服务资源返回格式,一般设置为application/json</td>
                </tr>
                <tr >
                    <td >FILTER</td>
                    <td ></td>
                    <td style="user-select: text;">非必须项，服务资源筛选项，如{{Filter}},意思为筛选字段为level,值为2的结果</td>
                </tr>
                <tr >
                    <td ></td>
                    <td ></td>
                    <td >其他参数请参考OGC WFS服务标准</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">示例</div>
            <div  class="new-content-line" style="width: 32px;"></div>
        </div>

        <div class="codes">
            <p class="code0">
                //codes like this 
            </p>
            <div style="border: 1px solid #ddd;padding: 10px;background-color: #e6e6e6;border-radius: 15px;user-select: text;">
                <p class="code0">
                    jquery.ajax({
                </p>
                <p class="code2">
                    type:"get",// 或者post
                </p>
                <p class="code2">
                    async：true
                </p>
                <p class="code2">
                    dataType:"json",
                </p>
                <p class="code2">
                    {{urlAjax}}
                </p>
                <p class="code2">
                    data: {
                </p>
                <p class="code4">
                service:'WFS',
                </p>
                <p class="code4">
                    version:'1.1.0',
                </p>
                <p class="code4">
                    request:'GetFeature',
                </p>
                <p class="code4">
                    TYPENAME:'xzqh:xzqh',
                </p>
                <p class="code4">
                    outputFormat:'application/json',
                </p>
                <p class="code4">
                    SRSNAME:'EPSG:3857',
                </p>
                <p class="code4">
                    PROPERTYNAME:'name,code,level',//without geom
                </p>
                <p class="code4">
                    FILTER:'{{Filter}}',
                </p>
                <p class="code2">
                    }   
                </p>
                <p>
                    }).then(result=>{
                </p>
                <p class="code4">
                    //the result like this
                </p>
                <p class="code4">
                    crs: null,
                </p>
                <p class="code4">
                    features: [
                </p>
                <p class="code6">
                    {
                </p>
                <p class="code8">
                    geometry: null,//如果PROPERTYNAME没有定义值或定义了geom 就会返回标准的geojson格式的wkt
                </p>
                <p class="code8">
                    id: "xzqh.fid--36ed2955_171d8af16ea_2f98",
                </p>
                <p class="code8">
                    properties: {gid: 1278, name: "乌海市", code: 150300, level: 2},//只返回PROPERTYNAME定义的属性
                </p>
                <p class="code8">
                    type: "Feature"
                </p>
                <p class="code6">
                    }
                </p>
                <p class="code6">
                    .......省略
                </p>
                <p class="code4">
                    ],
                </p>
                <p class="code4">
                    numberMatched: 12,
                </p>
                <p class="code4">
                    numberReturned: 12,
                </p>
                <p class="code4">
                    timeStamp: "2020-05-03T12:16:06.531Z",
                </p>
                <p class="code4">
                    totalFeatures: 12,
                </p>
                <p class="code4">
                    type: "FeatureCollection"
                </p>   
                <p class="code2">
                    })
                </p>
            </div>
        </div>
    </div>
</div>

</template>
<script>
  export default {
    data() {
      return {
          url:'',
          urlAjax:'',
          Filter:`<Filter><PropertyIsEqualTo><PropertyName>level</PropertyName><Literal>2</Literal></PropertyIsEqualTo></Filter>`,
      }
    },
    mounted() {
        this.url=window.Glod.wfs
        this.urlAjax=`url：${window.Glod.wfs}`
    },
  }
</script>